<template>
	<view>
	<view v-if="!showPayouts">
		<view class="top">
			<view class="top-info">
				<text class="name"><u-icon name="phone"></u-icon>{{userName}}</text>
				<br>
				<u--text color="white" mode="phone" prefixIcon="phone" iconStyle="color:white;font-size:26rpx;margin-right:11rpx "
					:text="userPhone" format="encrypt" margin="12rpx 0 0 27rpx" size="13"></u--text>
				<br>
				<u--text color="white" prefixIcon="email" iconStyle="color:white;font-size:26rpx;margin-right:11rpx "
					:text="userEmail" margin="12rpx 0 0 27rpx" size="13"></u--text>
				<br>
			</view>
			<view class="top-avatar">
				<u--image :showLoading="true" :src="src" height="120rpx" width="120rpx" @click="click" shape="circle">
				</u--image>
			</view>
		</view>

		<view class="container">

				<!-- 左侧申请按钮 -->
				<view class="balance-card">
								<view class="balance-left">
									<u-icon name="red-packet" color="#BD3124" size="32"></u-icon>
									<text class="balance-amount" v-if="showMoney">￥{{ balance.toFixed(2) }}</text>
									<text class="balance-amount" v-else>￥******</text>
									<u-icon :name="showMoney ? 'eye' : 'eye-off'"  size="22"
									@click="toggleMoneyDisplay" class="eye-icon"></u-icon>
								</view>
								<button class="withdraw-btn" @click="showPayouts = true">提现</button>
							</view>
				
							<!-- 邀请码 -->
							<view class="invite-code">分销邀请码：{{ inviteCode }}</view>
				
							<!-- 分销数和累计收益 -->
							<view class="summary-row">
								<view class="summary-item">
									<view>分销数</view>
									<view class="summary-value">{{ orderCount }}</view>
								</view>
								<view class="summary-item">
									<view>累计收益</view>
									<view class="summary-value red">￥{{ income.toFixed(2) }}</view>
								</view>
							</view>
				
							<!-- 分销列表 -->
							<view class="fenxiao-list-title">分销列表</view>
							<view class="fenxiao-table">
								<view class="table-header">
									<text>用户名</text>
									<text style="margin-left: -105rpx;">商品</text>
									<text style="margin-left: -70rpx;">时间</text>
									<text>佣金</text>
								</view>
								<view class="table-row" v-for="(item, idx) in fenxiaoList" :key="idx">
									<text>{{ item.username }}</text>
									<text>{{ item.product }}</text>
									<text>{{ item.date }}</text>
									<text>{{ item.amount }}</text>
								</view>
							</view>
						</view>		
			</view>
			<view v-if="showPayouts" class="withdraw-mask">
			      <view class="withdraw-form">
			        <view class="withdraw-amount">
			          <text>提现金额</text>
			          <input type="number" placeholder="请输入" v-model="withdrawAmount" />
			        </view>
			        
			        <view class="withdraw-card">
			          <view class="withdraw-left">
			            <text>选择银行卡</text>
			          </view>

			          <view class="withdraw-right">  
						<view class="bank-card" v-for="(card, index) in bankCards" :key="index">
							<u-icon name="calendar" color="blue" size="25"></u-icon>
			              <text>{{ card.bankName }}</text>
			            </view>
			            <view class="bank-card" @click="addBankCard">
			              <u-icon name="plus-circle" color="#BD3124" size="25"></u-icon>
			              <text>添加银行卡</text>
			            </view>
			          </view>
			        </view>
			        
			        <view class="withdraw-buttons">
			          <button class="cancel-btn" @click="showPayouts = false">取消</button>
			          <button class="confirm-btn" @click="confirmWithdraw">确认</button>
			        </view>
			      </view>
			    </view>
				</view>
</template>

<script>
	import {
	 selectAllInfoU,
	 selectAllInfoP,
	 selectInfoU,
	 selectInfoP,} from '@/api/distribution.js'
	export default {
		
		mounted() {
		    this.fetchUserInfo();
			this.getId();
		  },
		  
			data() {
				return {
					src: "",
					userName: "",
					userPhone: "",
					userEmail: "",
					userId: 0,
					parentId: 0,
					showApplyForm: false,
					showMoney: false,
					balance: 1,
					inviteCode: "",
					orderCount: 2,
					income: 3,
					fenxiaoList: [{
						username: '小红',
						product: '绘画',
						date: '2025-10-6',
						amount: 150
					}],
					showPayouts: false,
					      withdrawAmount: '',
					      bankCards: [
					        { bankName: '中国工商银行' },
					        { bankName: '中国银行' }
					      ]
				}
			},
			
			methods: {
				getId() {
				      // 使用箭头函数保持 this 指向
				      uni.getStorage({
				        key: 'parentId',
				        success: (res) => {  
				          console.log(res.data, 123);
				          this.parentId = res.data;
						  this.fetchUserInfo();
				        }
				      });
				      
				      uni.getStorage({
				        key: 'userId',
				        success: (res) => {  
							console.log(res.data, 123);
				          this.userId = res.data; 
						  this.fetchUserInfo();
				        }
				      });				  
				},
				toggleMoneyDisplay() {
					this.showMoney = !this.showMoney;
				},
				fetchUserInfo() {
					const params = {
						userId: this.userId,
						 parentId: this.parentId 
					};
				      if (this.userId != 0) {
				      	selectAllInfoU(params).then(res => {
				      		if (res.code === 200) {
				      			this.inviteCode = res.data.info.distributorId;
				      			this.orderCount = res.data.info.orderCount;
				      			this.income = res.data.info.income; 
				      		}
				      	}).catch(error => {
				      		console.error("获取信息失败:", error);
				      	});
				      }else if(this.parentId != 0){
				      	selectAllInfoP(params).then(res => {
				      		if (res.code === 200) {
				      			this.inviteCode = res.data.info.distributorId;
				      			this.orderCount = res.data.info.orderCount;
				      			this.income = res.data.info.income; 
				      		}
				      	}).catch(error => {
				      		console.error("获取信息失败:", error);
				      	});
				      };
						if (this.userId != 0) {
							selectInfoU(params).then(res => {
													console.log(res);
								if (res.code === 200) {
									this.userName = res.data.info.userName;
									this.userPhone = res.data.info.phonenumber;
									this.userEmail = res.data.info.email;
									this.src = res.data.info.avatar; 
								}
							}).catch(error => {
								console.error("获取信息失败:", error);
							});
						}else if(this.parentId != 0){
							selectInfoP(params).then(res => {
								if (res.code === 200) {
									this.nickName = res.data.info.parentRelation;
									this.userPhone = res.data.info.parentPh;
									this.userEmail = res.data.info.email;
									this.src = res.data.info.parentUrl; 
								}
							}).catch(error => {
								console.error("获取信息失败:", error);
							});
						}
				    },
			}
		}
</script>

<style lang="scss">
	.top {
		width: 100%;
		height: 270rpx;
		background: #0F40F5;
		border: 1rpx solid #0d05f6;
		padding-top: 15rpx;

		.top-info {
			color: white;
			padding: 50rpx 65rpx 10rpx;
			float: left;
			font-weight: 550;
			font-size: 45rpx;
		}

		.top-avatar {
			margin-top: 56rpx;
			margin-right: 85rpx;
			float: right;
		}
	}

	.container {

		border-radius: 20rpx 20rpx 15rpx 15rpx; /* 上边圆角更大，下部略小更美观 */
		background-color: #ffffff;
		padding: 35rpx 35rpx;
		margin: -25rpx auto 0; 
		
	}

	.balance-card {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;
		}
	
		.balance-left {
			display: flex;
			align-items: center;
		}
	
		.balance-amount {
			color: #FF1600;
			font-size: 48rpx;
			font-weight: bold;
			margin: 0 16rpx;
		}
	
		.withdraw-btn {
			background-color: #0F40F5;
			color: #fff;
			border-radius: 30rpx;
			padding: 12rpx 24rpx;
			font-size: 28rpx;
			width: 160rpx;
			height: 80rpx;
			line-height: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 160rpx;
		}
	
		.invite-code {
			margin: 20rpx 0 0 0;
			color: #000;
			font-size: 30rpx;
		}
	
		.summary-row {
			display: flex;
			justify-content: space-between;
			margin: 30rpx 0 20rpx 0;
		}
	
		.summary-item {
			background: white;
			flex: 1;
			margin-right: 20rpx;
			border-radius: 20rpx;
			text-align: center;
			padding: 30rpx 0;
			font-size: 32rpx;
			border: 1rpx solid #a0a0a0;
		}
	
		.summary-item:last-child {
			margin-right: 0;
		}
	
		.summary-value {
			font-size: 40rpx;
			margin-top: 10rpx;
		}
	
		.red {
			color: #FF1600;
		}
	
		.fenxiao-list-title {
			color: #BD3124;
			font-size: 35rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
			display: block;
			font-style: italic;
		}
	
		.fenxiao-table {
			background: white;
			border-radius: 20rpx;
			margin-bottom: 10rpx;
			border: 1rpx solid #a0a0a0;
		}
	
		.table-header,
		.table-row {
			display: flex;
			justify-content: space-between;
			padding: 24rpx 16rpx;
			font-size: 30rpx;
		}
	
		.table-header {
			// font-weight: bold;
			border-bottom: 1rpx solid #a0a0a0;
		}
	
		.table-row:not(:last-child) {
			border-bottom: 1rpx solid #f0f0f0;
		}
		
		
		
		
		
		
		
	.withdraw-mask {
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background-color: rgba(76, 76, 76, 1.0);
	  display: flex;
	  align-items: flex-end;
	  z-index: 999;
	}
	
	.withdraw-form {
	  width: 100%;
	  background: #EBEBEB;
	  border-radius: 24rpx 24rpx 0 0;
	  padding: 40rpx 70rpx;
	  animation: slide-up 0.3s ease;
	}
	
	// @keyframes slide-up {
	//   from {
	//     transform: translateY(100%);
	//   }
	//   to {
	//     transform: translateY(0);
	//   }
	// }
	
	.withdraw-amount {
	  display: flex;
	  // justify-content: space-between;
	  align-items: center;
	  padding: 20rpx 0;
	  
	  text {
	    font-size: 42rpx;
	    color: #000;
	    font-weight: 500;
	  }
	  
	  input {
	    // flex: 1;
	    text-align: left;
	    font-size: 28rpx;
	    font-weight: 500;
	    margin-left: 40rpx;
		width: 250rpx;
	    background-color: white;
	    padding: 10rpx 20rpx;
		border: 1rpx solid #a3a3a3;
	  }
	}
	
	.withdraw-card {
	  padding: 30rpx 0;
	  
	  .withdraw-left {
	    display: flex;
	    align-items: center;
	    margin-bottom: 30rpx;
	    
	    text {
	      font-size: 32rpx;
	      color: #000;
	      font-weight: 500;
	    }
	  }
	  
	  .withdraw-right {
	    .bank-card {
	      padding: 5rpx 50rpx;
	      border-radius: 2rpx;
	      margin-bottom: 10rpx;
	      display: flex;
	      align-items: center;
	      text {
	        font-size: 34rpx;
	        color: #000;
	        margin-left: 16rpx;
	      }
	    }
	    
	  }
	}
	
	.withdraw-buttons {
	  display: flex;
	  margin-top: 10rpx;
	  margin-left: 40rpx;
	  margin-right: 30rpx;
	  
	  button {
	    flex: 1;
	    height: 68rpx;
	    line-height: 68rpx;
	    font-size: 30rpx;
	    border-radius: 10rpx;
	    font-weight: 500;
	    
	    &:first-child {
	      margin-right: 114rpx;
	    }
	  }
	  
	  .cancel-btn {
	    background: #f5f5f5;
	    color: #000;
	    border: none;
	  }
	  
	  .confirm-btn {
	    background: #0F40F5;
	    color: white;
	    border: none;
	  }
	}
</style>